<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除标签默认的margin和padding*/
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f4f5f9;
        }
        .box {
          /*1 宽高*/
          width: 228px;
          height: 270px;
          /*2 背景颜色 */
          background-color: #fff;
          margin:100px auto;
        }
        .box.product {
            /*width:228px ; */
            width: 100%;
        }
        .box .h3 {
            height: 52px;
            padding-left: 24PX;
            padding-right: 20PX;
            margin-top: 25PX;
            font-size: 14PX;
            font-weight: 400;     
        }
        .box P{
            margin-left: 24PX;
            font-size: 12PX;
            color: #F77321;
        }
    </style>
</head>
<body>
    <!--布局流程：从上到下，从外到内-->
    <div class="box">
        <img src="../" alt="" class="product">
        <h3>android网络图片加载框架详解</h3>
        <p><span>高级</span>.1125人在学习</p>
    </div>   
</body>
</html>